<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
           $("h2").click(function(){
               let u = this.nextSibling.nextSibling;
               // 判断当前所点击的列表是显示还是隐藏
               // 如果是隐藏的
               if($(u).css("display") == "none"){
                   // 先将所有ul全部隐藏
                   $("ul").hide();
                   // 再将当前元素显示
                   $(u).show();
                   return;
               }
               // 如果当前元素是显示的,则说明其他元素全是隐藏
               // 只需要将当前元素隐藏即可
               $(u).hide();
           });
        });
    </script>
</head>
<body>
<!--
    三个列表中最多只能展示出一个列表的选项
    当点击某一个列表中,如果原本列表是显示的,则直接隐藏起来
    如果原本列表是隐藏的,则显示该列表,隐藏其余列表
-->
<h2>您最喜欢的动画片</h2>
<ul style="display: none;">
    <li>奶龙</li>
    <li>萌鸡小队</li>
    <li>小猪佩奇</li>
</ul>
<h2>您最喜欢的电影</h2>
<ul style="display: block;">
    <li>哪吒之魔童降世</li>
    <li>熊出没之还我熊芯</li>
    <li>姜子牙</li>
</ul>
<h2>您最喜欢的综艺节目</h2>
<ul style="display: none;">
    <li>极限挑战</li>
    <li>奔跑吧</li>
    <li>向往的生活</li>
</ul>
</body>
</html>